<!-- 提交订单 -->
<template>
  <div class="index-container">
    <van-nav-bar title="提交订单" />
    <div class="goods-detail-box">
      <van-image :src="state.Img01" fit="contain" width="120" height="160" radius="8" />
      <div class="goods-detail">
        <h3>VIP永久更新</h3>
        <p>￥{{ amount / 100 }}</p>
      </div>
    </div>
    <!-- <van-submit-bar :price="amount" button-text="提交订单" tip="寄送至：湖北 武汉 武昌, 吴先生" :loading="isLoading" -->
    <van-submit-bar :price="amount" button-text="提交订单" :loading="isLoading" class="btn-color" @submit="submitPay" />
    <van-popup v-model:show="isPopup" position="bottom" round :style="{ height: '50%' }" closeable>
      <van-nav-bar title="请选择支付方式" />
      <div class="pay-btn">
        <van-radio-group v-model="checked">
          <van-cell-group inset>
            <van-cell clickable @click="checked = '1'">
              <template #title>
                <div class="pay-item">
                  <img src="@/assets/image/pay2.png" />
                  <span>微信</span>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell clickable @click="checked = '2'">
              <template #title>
                <div class="pay-item">
                  <img src="@/assets/image/pay1.png" />
                  <span>支付宝</span>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="verify-pay-btn">
        <van-button type="primary" size="normal" @click="verifyPay()">确认支付</van-button>
      </div>
    </van-popup>
    <van-popup v-model:show="isWxPayPopup"  :style="{ borderRadius: '8px' }" z-index="99999999">
      <div class="pay-wx-main" @click.stop>
        <div class="pay-item">
          <!-- <h5>请使用微信支付</h5> -->
          <img src="@/assets/image/img06.jpg" />
          <p>支付完成请截图发给客服喔！</p>
        </div>
      </div>
    </van-popup>
    <van-overlay :show="isOverlay" @click="isOverlay = false" z-index="999999">
      <div class="wrapper">
        <div class="tips">
          <img src="@/assets/image/img05.png">
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { showToast } from 'vant';
import {
  CreateOrder, // 新增订单
  GoodDetail, // 商品详情
} from "@/api/index.js"
import { getLocalStorage } from "@/utils/tool"

const route = useRoute()
const router = useRouter()

const checked = ref("1")

const state = reactive({
  Img01: "",
  anchorType: [
    {
      id: 1,
      title: "vip永久更新",
      image: "",
      checked: true,
      money: 0.1,
      context: "元"
    },
  ],
  orderNumber: "", // 订单编号
  isOrder: false,
  isWeixin: false
})

let isLoading = ref(false)

const payOrder = async () => {
  let paramsorder = {
    goodsId: route.query.goodId,
  }
  isLoading.value = true
  let datares = await CreateOrder(paramsorder)
  let resData = datares.msg
  console.log(datares.msg, resData)
  isLoading.value = false
  document.getElementById('payMent').innerHTML = resData;
  document.forms[0].setAttribute('target', '_self') // 当前窗口跳转
  document.forms[0].submit();
  document.getElementById('payMent').innerHTML = ""
}

// 提交支付
let isPopup = ref(false)
const submitPay = () => {
  // payOrder()
  isPopup.value = true
}

const is_weixn = () => {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;
  } else {
    return false;
  }
}

let amount = ref(0)
const GetGoodDetail = async () => {
  let { data } = await GoodDetail({ goodId: route.query.goodId })
  amount.value = data.amount
  state.Img01 = data.img
  // console.log(data,state.Img01)
}

//确认支付
const isWxPayPopup = ref(false)
const isOverlay = ref(false)
const verifyPay = () => {
  if (checked.value == '2') {
    const newParams = { ...route.query, openId: getLocalStorage('openId') };
    // 导航到相同的路径，但是使用新的参数
    router.push({
      name: route.name,
      query: newParams,
    });
    isOverlay.value = true
    return
  }
  isWxPayPopup.value = true
}


onMounted(() => {
  state.anchorType[0].image = route.query.qrCode
  state.anchorType[0].money = Number(route.query.diyPrice)
  // state.isWeixin = is_weixn()
  GetGoodDetail()
})

</script>



<style lang="scss" scoped>
.index-container {
  min-height: 100vh;
  background: #f2f2f2;
}

.goods-detail-box {
  background: #fff;
  padding: 10px;
  display: flex;
  margin-top: 10px;

  .goods-detail {
    margin-left: 10px;
    color: #333;

    h3 {
      padding-top: 20px;
      font-size: 20px;
      font-weight: normal;
    }

    p {
      color: #f00;
      font-size: 16px;
      margin-top: 10px;
    }
  }
}

.weixin-open {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(222, 222, 222);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  img {
    width: 100%;
  }
}


.pay-btn {
  margin-top: 30px;

  .pay-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
}

:deep(.van-cell-group--inset) {
  margin: 0;
}

.verify-pay-btn {
  width: calc(100% - 30px);
  padding: 15px;
  position: absolute;
  bottom: 0;

  :deep(.van-button) {
    width: 100%;
  }
}

.tips {
  color: #fff;

  img {
    width: 100%;
  }
}

.pay-wx-main {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
  .pay-item{
    // padding:15px;
    border-radius: 8px;
    overflow: hidden;
    h5{
      font-size: 18px;
      margin-bottom: 10px;
    }
    img{
      width: 100%;
    }
    h5,p{
      text-align: center;
    }
    p{
      padding-bottom: 20px;
    }
  }
}
</style>
